<template>
    <div>
        <!-- <el-button type="primary" @click="handleAddAcademicExchange">添加</el-button>
        <el-button type="primary" @click="getAcademicExchange">刷新</el-button> -->

        <el-form :model="searchForm">
            <el-row>
                <el-col :span="7" class="serach-padding">
                    <el-form-item label="成果创建时间">
                        <el-date-picker v-model="searchForm.dateRange" type="daterange" value-format="YYYY-MM-DD"
                            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="5" class="serach-padding">
                    <el-form-item label="审核状态">
                        <el-select v-model="searchForm.reviewStatusId" placeholder="请选择" width="150px">
                            <el-option label="待审核" value="1"></el-option>
                            <el-option label="审核中" value="2"></el-option>
                            <el-option label="审核通过" value="3"></el-option>
                            <el-option label="审核拒绝" value="4"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5" class="serach-padding">
                    <el-form-item>
                        <el-button @click="searchAcademicExchange">查询</el-button>
                        <el-button @click="clearSearchOption">清空</el-button>
                    </el-form-item>

                </el-col>
                <div class="flex-grow"></div>
                <el-button @click="handleAddAcademicExchange">添加</el-button>
                <el-button @click="studentGetAcademicExchange">刷新</el-button>
            </el-row>

        </el-form>

        <!--学术交流表格-->
        <el-table :data="achievementAcademicExchange" style="width: 100%; margin-top: 10px;" stripe :border="true">
            <el-table-column fixed="left" prop="createdDate" label="创建时间" width="110" ></el-table-column>
            <el-table-column fixed="left" prop="reviewStatus" label="审核状态" width="100" ></el-table-column>

            <el-table-column prop="reportName" label="报告名称" width="300" show-overflow-tooltip></el-table-column>
            <el-table-column prop="venue" label="会议地点" width="140" show-overflow-tooltip></el-table-column>
            <el-table-column prop="conferenceName" label="会议名称" width="180" show-overflow-tooltip></el-table-column>
            <el-table-column prop="organizer" label="主办单位" width="160" show-overflow-tooltip></el-table-column>
            <el-table-column prop="isSpecialInvitation" label="是否特邀" width="100"
                show-overflow-tooltip></el-table-column>
            <el-table-column prop="conferenceDate" label="会议时间" width="140" show-overflow-tooltip></el-table-column>
            <el-table-column prop="remarks" label="备注" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="submissionDate" label="填报日期" width="140" show-overflow-tooltip></el-table-column>
            <el-table-column fixed="right" label="操作" width="70">
                <template #default="scope">
                    <el-row>
                        <el-button type="primary" @click="handleChangeAcademicExchange(scope.row)" size="small">操作</el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>

        <!--添加学术交流-->
        <el-dialog v-model="dialogAddAcademicExchangeVisible" title="添加学术交流">
            <el-form ref="formRef" :model="studentAddAcademicExchangeInfo" label-width="120px" hide-required-asterisk>
                <el-form-item label="报告名称" prop="reportName">
                    <el-input v-model="studentAddAcademicExchangeInfo.reportName"></el-input>
                </el-form-item>
                <el-form-item label="会议地点" prop="venue">
                    <el-input v-model="studentAddAcademicExchangeInfo.venue"></el-input>
                </el-form-item>
                <el-form-item label="会议名称" prop="conferenceName">
                    <el-input v-model="studentAddAcademicExchangeInfo.conferenceName"></el-input>
                </el-form-item>
                <el-form-item label="主办单位" prop="organizer">
                    <el-input v-model="studentAddAcademicExchangeInfo.organizer"></el-input>
                </el-form-item>
                <el-form-item label="是否特邀" prop="isSpecialInvitation">
                    <el-input v-model="studentAddAcademicExchangeInfo.isSpecialInvitation"></el-input>
                </el-form-item>
                <el-form-item label="会议时间" prop="conferenceDate">
                    <el-date-picker v-model="studentAddAcademicExchangeInfo.conferenceDate" type="date" placeholder="选择日期"
                        value-format="YYYY-MM-DD"></el-date-picker>
                </el-form-item>
                <el-form-item label="备注" prop="remarks">
                    <el-input v-model="studentAddAcademicExchangeInfo.remarks"></el-input>
                </el-form-item>
                <el-form-item label="填报日期" prop="submissionDate">
                    <el-date-picker v-model="studentAddAcademicExchangeInfo.submissionDate" type="date" placeholder="选择日期"
                        value-format="YYYY-MM-DD"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="studentAddAcademicExchange">添加</el-button>
                    <el-button @click="dialogAddAcademicExchangeVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--操作学术交流-->
        <el-dialog title="修改学术交流" v-model="dialogChangeAcademicExchangeVisible" width="80%">
            <el-form :model="currentAcademicExchangeInfo" label-width="120px">
                <el-form-item label="报告名称">
                    <el-input v-model="currentAcademicExchangeInfo.reportName" :disabled="!editModel"></el-input>
                </el-form-item>
                <el-form-item label="会议地点">
                    <el-input v-model="currentAcademicExchangeInfo.venue" :disabled="!editModel"></el-input>
                </el-form-item>
                <el-form-item label="会议名称">
                    <el-input v-model="currentAcademicExchangeInfo.conferenceName" :disabled="!editModel"></el-input>
                </el-form-item>
                <el-form-item label="主办单位">
                    <el-input v-model="currentAcademicExchangeInfo.organizer" :disabled="!editModel"></el-input>
                </el-form-item>
                <el-form-item label="是否特邀">
                    <el-input v-model="currentAcademicExchangeInfo.isSpecialInvitation" :disabled="!editModel"></el-input>
                </el-form-item>
                <el-form-item label="会议时间">
                    <el-date-picker v-model="currentAcademicExchangeInfo.conferenceDate" type="date" placeholder="选择日期"
                        value-format="YYYY-MM-DD" :disabled="!editModel"></el-date-picker>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="currentAcademicExchangeInfo.remarks" :disabled="!editModel"></el-input>
                </el-form-item>
                <el-form-item label="填报日期">
                    <el-date-picker v-model="currentAcademicExchangeInfo.submissionDate" type="date" placeholder="选择日期"
                        value-format="YYYY-MM-DD" :disabled="!editModel"></el-date-picker>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogChangeAcademicExchangeVisible = !dialogChangeAcademicExchangeVisible">取 消</el-button>
                    <el-button type="primary" @click="studentChangeAcademicExchange" v-show="editModel">保存修改</el-button>
                    
                    <el-button type="primary" @click="editModel = true" v-show="!editModel && !(currentAcademicExchangeInfo.reviewStatus==='审核通过'|| currentAcademicExchangeInfo.reviewStatus==='审核中' )">修改</el-button>
                    <el-button type="primary" v-show="!editModel && currentAcademicExchangeInfo.reviewStatus==='审核中'" disabled >审核中</el-button>
                    <el-popconfirm title="是否确定提交审核？" @confirm="submitForReview" >
                        <template #reference>
                            <el-button type="primary" v-show="!editModel && (currentAcademicExchangeInfo.reviewStatus==='待审核' || currentAcademicExchangeInfo.reviewStatus==='审核拒绝') ">提交审核</el-button>
                        </template>
                    </el-popconfirm>
                    <el-button type="primary" v-show="!editModel && currentAcademicExchangeInfo.reviewStatus==='审核拒绝'" @click="openRufuseMsg" >审核未通过原因</el-button>

                    <el-popconfirm title="是否确认删除这条记录？" @confirm="deleteAcademicExchange">
                        <template #reference>
                            <el-button type="danger" v-show="!editModel && currentAcademicExchangeInfo.reviewStatus!=='审核通过'">删除</el-button>
                        </template>
                    </el-popconfirm>
                </span>
            </template>
        </el-dialog>


    </div>


</template>
<script setup>
import http from '@/utils/axios.js'
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'


// 审核成果
const submitForReview = () => {
    try {
        http.patch('/api/review/submit', {achievementId: currentAcademicExchangeInfo.value.achievementId}
        ).then(res => {
            console.log(res);
            if (res.data.code === 4000) {
                ElMessage.success("提交审核成功！")
                dialogChangeAcademicExchangeVisible.value = false
                studentGetAcademicExchange()
            } else {
                ElMessage.error("提交审核失败：" + res.data.msg)
            }
        })
        
    } catch (error) {
        
    }
}

// 查看拒绝原因
const openRufuseMsg = () => {
  ElMessageBox.alert(currentAcademicExchangeInfo.value.reviewComments, '拒绝原因')
}



// 搜索
var searchForm = reactive({})

const searchAcademicExchange = () => {
    console.log(searchForm);
    try {
        http.get('/api/achievement/academic-exchange/search', {
            params: {
                dateRangeStart: searchForm.dateRange?.[0],
                dateRangeEnd: searchForm.dateRange?.[1],
                reviewStatusId: searchForm.reviewStatusId
            }
        })
            .then(res => {
                achievementAcademicExchange.length = 0;
                Object.assign(achievementAcademicExchange, res.data)
                console.log(res)
            })
    } catch (error) {
        console.log(error);
    }
}

const clearSearchOption = () => {
    searchForm.dateRange = null,
        searchForm.reviewStatusId = null
    studentGetAcademicExchange()
}

// 从后端获取初始化数据
onMounted(() => {
    try {
        console.log("初始化数据")
        studentGetAcademicExchange()
        loading.value = false
    } catch (error) {
        console.error('Error fetching student academic exchange info:', error);
    }
})
const loading = ref(true)

// 获取学术交流数据
const achievementAcademicExchange = reactive([]);
const studentGetAcademicExchange = () => {
    http.get('/api/achievement/academic-exchange')
        .then(res => {
            Object.assign(achievementAcademicExchange, res.data);
            console.log(res);
        })
}

// 添加学术交流
const dialogAddAcademicExchangeVisible = ref(false)
var studentAddAcademicExchangeInfo = reactive({})
const handleAddAcademicExchange = () => {
    dialogAddAcademicExchangeVisible.value = true
}
const studentAddAcademicExchange = async () => {
    console.log(studentAddAcademicExchangeInfo);
    try {
        await http.post('/api/achievement/academic-exchange', studentAddAcademicExchangeInfo)
            .then(res => {
                if (res.status === 200) {
                    res = res.data
                    if (res.code === 3000) {
                        studentGetAcademicExchange()
                        dialogAddAcademicExchangeVisible.value = false
                        studentAddAcademicExchangeInfo = {}
                        ElMessage.success('添加成功')
                    } else if (res.code === 3001) {
                        ElMessage.error('添加失败：' + res.data.msg)
                    }
                } else {
                    ElMessage.error('添加失败：未知原因')
                }
            })
    } catch (error) {
        console.log(error);
        ElMessage.error('添加失败：未知原因')
    }
}

// 删除学术交流
const deleteAcademicExchange = async () => {
    console.log();
    try {
        await http.delete('/api/achievement/academic-exchange', {
            data: { achievementId: currentAcademicExchangeInfo.value.achievementId }
        })
            .then(res => {
                if (res.status === 200) {
                    res = res.data
                    if (res.code === 5000) {
                        achievementAcademicExchange.length = 0
                        ElMessage.success('删除成功')
                        dialogChangeAcademicExchangeVisible.value = false
                        studentGetAcademicExchange()
                    } else if (res.code === 5001) {
                        ElMessage.error('删除失败：' + res.data.msg)
                    }
                } else {
                    ElMessage.error('删除失败：未知原因')
                }
            })
    } catch (error) {
        console.log(error);
        ElMessage.error('删除失败')
    }
}

// 修改学术交流
const editModel = ref(false)

const dialogChangeAcademicExchangeVisible = ref(false)
const currentAcademicExchangeInfo = ref({})
var originalReportName = ''
const handleChangeAcademicExchange = (academicExchange) => {
    currentAcademicExchangeInfo.value = { ...academicExchange };
    originalReportName = currentAcademicExchangeInfo.value.reportName
    dialogChangeAcademicExchangeVisible.value = true
    editModel.value = false
}
const studentChangeAcademicExchange = async () => {
    try {
        if (originalReportName === currentAcademicExchangeInfo.value.reportName) {
            delete currentAcademicExchangeInfo.value.reportName
        }

        await http.put('/api/achievement/academic-exchange', currentAcademicExchangeInfo.value)
            .then(res => {
                if (res.status === 200) {
                    res = res.data
                    if (res.code === 4000) {
                        ElMessage.success('更新成功')
                        dialogChangeAcademicExchangeVisible.value = false
                        studentGetAcademicExchange()
                    } else if (res.code === 4001) {
                        ElMessage.error('更新失败：' + res.data.msg)
                    }
                } else {
                    ElMessage.error('更新失败：未知原因')
                }
            })
    } catch (error) {
        console.log(error);
        ElMessage.error('更新失败')
    }
}
</script>

<style scoped>
.flex-grow {
    flex-grow: 1;
}

.serach-padding {
    padding-right: 20px;
}
</style>